【整理】JS DOM基本操作方法

Posted on | In

面试的时候有问到DOM操作，全给忘了，整理一下。

DOM

Node类型

DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。每个节点都有一个nodeType属性，用于表明节点类型。

属性
  • nodeType
  • nodeName
  • nodeValue
  • childNodes
    • 保存类数组对象NodeList
  • parentNode ： 指向文档树中的父节点
    • 父节点有firstChild与lastChild属性，分别指向childNodes列表中的第一个和最后一个节点
  • nextSibling
  • previousSibling
  • ownerDocument： 指向整个文档的文档节点
节点操作方法
  • appendChild()
  • insertBefore()
  • replaceChild()
    • 接收两个参数：要插入的节点和要替换的节点
  • removeChild()
其他方法

所有节点共有的方法

  • cloneNode(): 用于创建节点副本
  • normalize(): 处理文档树中的文本节点
Document类型

Document类型表示文档，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，可以作为全局对象来访问。

特征
  • nodeType: 9
  • nodeName: #document
  • nodeValue: null
  • parentNode: null
属性
  • documentElement
  • body: 指向元素
  • doctype: 取得对<!DOCTYPE>的引用
  • title: 取得文档标题
  • URL
  • domain
方法
  • getElementById()
  • getElementsByTagName()
Element类型
  • nodeTye: 1
  • nodeName:
  • nodeValue
方法

主要是属性方法，自定义特性应加上“data-”前缀以便验证

  • getAttribute()
  • setAttribute()
  • removeAttribute()
  • attributes()：返回属性的集合
  • createElement()
  • appendChild()
Text类型
  • nodeType: 3
  • nodeName: #text
  • nodeValue

DOM扩展

核心方法有两个,可以通过Document及Element类型的实例调用，接收css选择器为参数

  • querySelector()
  • querySelectorAll()
元素遍历方法
  • childElementCount: 返回子元素的个数
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling